<template>
<view>
	<view class="header">
		<input type="text" @input="searchName" placeholder="请输入顾客姓名">
		<picker @change="bindType" :value="typeIndex" :range="typeArr">
			<text>{{typeArr[typeIndex]}}</text>
			<image class="picker_img" src="/static/img/buttom.png"></image>
		</picker>
	</view>
	<view class="header1">
		<picker mode="date" :value="sdate" @change="bindDate" data-key="sdate">
			<view class="uni-input weui-input">{{sdate ? sdate : '请选择开始日期'}}</view>
		</picker>
		<picker mode="date" :value="edate" @change="bindDate" data-key="edate">
			<view class="uni-input weui-input">{{edate ? edate : '请选择结束日期'}}</view>
		</picker>
		<view class="header_bottom" @click="search">搜索</view>
	</view>
	
	<view class="table" v-if="typeIndex ==  1">
		<table border="0" width="95%" cellspacing="0" cellpadding="0"
		v-for="(item,index) in list" :key="index">
			<tr>
				<th colspan="2">项目名称</th>
				<td colspan="2">{{item.title}}</td>
			</tr>
			<tr>
				<th>客户姓名</th>
				<td>{{item.username}}</td>
				<th>剩余金额</th>
				<td>{{item.left_money}}</td>
			</tr>
			<tr>
				<th>支付金额</th>
				<th>账户抵扣</th>
				<th>代金券</th>
				<th>剩余次数</th>
			</tr>
			<tr>
				<td>{{item.pay_money}}</td>
				<td>{{item.offset_money}}</td>
				<td>{{item.give_money}}</td>
				<td>{{item.num}}</td>
			</tr>
		</table>
	</view>
	<view class="table" v-if="typeIndex ==  2">
		<table border="0" width="95%" cellspacing="0" cellpadding="0"
		v-for="(item,index) in list" :key="index">
			<tr>
				<th colspan="2">商品名称</th>
				<td colspan="2">{{item.title}}</td>
			</tr>
			<tr>
				<th>客户姓名</th>
				<td>{{item.username}}</td>
				<th>购买数量</th>
				<td>{{item.num}}</td>
			</tr>
			<tr>
				<th>订单价格</th>
				<th>支付金额</th>
				<th>账户抵扣</th>
				<th>代金券</th>
			</tr>
			<tr>
				<td>{{item.money}}</td>
				<td>{{item.pay_money}}</td>
				<td>{{item.offset_money}}</td>
				<td>{{item.give_money}}</td>
			</tr>
		</table>
	</view>
	
	<view class="table" v-if="typeIndex ==  0">
		<table border="0" width="98%" cellspacing="0" cellpadding="0">
			<tr>
				<td>客户姓名</td>
				<td>充值金额</td>
				<td>代金券</td>
				<td>支付金额</td>
			</tr>
			<tr v-for="(item,index) in list" :key="index">
				<td>{{item.username}}</td>
				<td>{{item.pay_money}}</td>
				<td>{{item.give_money}}</td>
				<td>{{item.pay_money}}</td>
			</tr>
		</table>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			//oaRole 1:店长2:员工3:商户
			typeArr:['充值','开卡','家居购买'],
			list:[],
			page:1,
			pageShow:true,
			keyword:'',
			typeIndex:0,
			sdate:'',
			edate:''
		}
	},
	onLoad:function(){
		uni.showLoading({
		    title: '加载中'  
		});
		this.getList();
	},
	methods: {
		getList:function(){
			var data = {
				type:this.typeIndex,
				oa_id:uni.getStorageSync('oa_id'),
				page:this.page,
				keyword:this.keyword,
				sdate:this.sdate,
				edate:this.edate
			}
			var that = this
			request({
				url: 'manage/center/all',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					if(res.data.data.last_page <= that.page){
						that.pageShow = false
					}
					if(that.page == 1){
						that.list = res.data.data.data
					}else{
						var list = that.list
						that.list = list.concat(res.data.data.data)
					}
				},
			})
		},
		select:function(key){
			this.type = key
			this.page = 1
			this.pageShow = true
			uni.showLoading()
			this.getList();
		},
		onReachBottom: function(){
			if(this.pageShow){
				 //当前不是最后一页可加载
				 this.page = this.page + 1
				 uni.showLoading()
				 this.getList();
			}
		},
		searchName:function(e){
			this.keyword = e.detail.value
			this.page = 1
			this.pageShow = true
			uni.showLoading({
			    title: '加载中'  
			});
			this.getList();
		},
		bindType:function(e){
			this.typeIndex = e.detail.value
			this.page = 1
			this.pageShow = true
			uni.showLoading({
			    title: '加载中'  
			});
			this.getList();
		},
		bindDate:function(e){
			var value = e.detail.value
			var name = e.currentTarget.dataset.key
			this[name] = value
		},
		search:function(){
			if(!this.sdate && !this.edate){
				uni.showToast({
					title: '请选择开始日期和结束日期!!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			uni.showLoading({
			    title: '加载中'  
			});
			this.page = 1;
			this.pageShow = true
			this.getList();
		},
	},
}
</script>
<style>
.header {
	width: 100%;
	padding-top:20rpx;
	padding-bottom: 20rpx;
	background: #FF7800;
	align-items: center;
	display: flex;
	flex-direction: row;
}
.header input{
	width:60%;
	margin-left:20rpx;
	height:60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	border:1rpx solid #fff;
	background:#fff;
	color:#000;
	text-align:center;
}
picker{
	margin-left:10rpx;
	background:#FFFFFF;
	height:60rpx;
	line-height: 60rpx;
	width:32%;
	display: flex;
	justify-content: center;
	padding-left:10rpx;
}
.picker_img{
	width:30rpx;
	height:30rpx;
}
.top{
    width:100%;
    height:80rpx;
    line-height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.table{
	width:100%;
	padding:10rpx 10rpx 120rpx 10rpx;
}
table{
	margin-top:30rpx;
}
td{
	border:1rpx solid #C8C7CC;
	text-align: center;
	height:70rpx;
	line-height:70rpx;
}
th{
	border:1rpx solid #C8C7CC;
	text-align: center;
	height:70rpx;
	line-height:70rpx;
}
.header1{
	width:100%;
	height:80rpx;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.header1 picker{
	width:40%;
	text-align: center;
	border:1px dashed #E5E5E5;
}
.header_bottom{
	width:18%;
	height:70rpx;
	line-height: 70rpx;
	background: #009900;
	text-align: center;
	color:#FFFFFF;
}
</style>